@import './colors';
@import './buttons';
@import './mixins/mixins';

.columns,
.columns-inner,
.column,
.column-hd {
  margin: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.columns-overlay,
.column-bd,
.column-button {
  overflow: hidden;
  position: absolute;
  z-index: 2;
}

.columns,
.columns-inner,
.columns-overlay,
.column,
.column-bd {
  height: 100%;
}

.columns {
  margin: 0;
  transition: .3s;

  &.panel-opened {
    margin-left: 313px;

    .column {
      &:first-child {
        background-color: transparent;
      }
    }

    .columns-overlay {
      display: block;
    }

    &.panel-trash-opened {
      .columns-overlay {
        display: none;
      }
    }
  }
}

.columns-overlay {
  @include opacity(.1);
  background-color: $white;
  display: none;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 3;
}

.column {
  border-right: 1px solid $border-color;
  box-sizing: border-box;
  float: left;
  width: 25%;
  z-index: 2;

  &:first-child {
    background-color: $background-color;
  }

  &:last-child {
    border-right: 0;
  }
}

.column-hd {
  border-bottom: 1px solid $border-color;
  height: 40px;
  margin: 0 10px;
  z-index: 2;
}

.column-title,
.column-count {
  font-weight: normal;
}

.column-title {
  font-size: 16px;
  line-height: 40px;
  margin: 0;
  overflow: hidden;
  padding: 0 10px;
}

.column-bd {
  box-sizing: border-box;
  left: 0;
  margin: 0;
  overflow: auto;
  padding-top: 41px;
  top: 0;
  width: 100%;
}

.column-button {
  @include button(40px, 40px, 24px);
  cursor: pointer;
  display: none;
  right: 0;
  top: 0;
}
